<template>
  <div>
    <!-- 外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗 -->
    <div class="mask" v-if="value"></div>
    <!-- 弹窗 -->
    <div class="videomasks" v-if="value">
      <!-- 关闭按钮 -->
      <div class="close" @click="closeDialog">
        <i class="el-icon-close icon"></i>
      </div>
      <!-- 视频：h5的视频播放video -->
      <video
        :src="videoSrc"
        controls="controls"
        autoplay
        width="100%"
        height="100%"
      >
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    videoaddress: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      // videoSrc:
      //   'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11c70c96529b6e6938567ec1aa0910e0.mp4'
      // 视频链接字段
      videoSrc: this.videoaddress
    }
  },
  methods: {
    // 关闭弹窗
    closeDialog () {
      this.$emit('input', false)
    }
  },
  watch: {
    videoaddress (val) {
      // console.log(val)
      this.videoSrc = val
    }
  }
}
</script>
<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #000000;
  opacity: 0.3;
}
/* 内容层 z-index要比遮罩大，否则会被遮盖 */
.videomasks {
  position: fixed;
  left: 25%;
  top: 0%;
  width: 50%;
  height: 50%;
  right: 0;
  margin-top: 12%;
  z-index: 20;
  /* transform: translate(-50%, -50%); */
}
/* 关闭按钮样式 */
.close {
  position: relative;
  left: 43%;
  right: 0;
  top: -30px;
  bottom: 0;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: rgb(18 18 18 / 48%);
}
.icon {
  position: absolute;
  top: 9px;
  left: 9px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}
</style>
